<template>
    <div class="content">
        <div class="title-item">
            <span>当日水电</span>
        </div>
        <div class="chart-div">
            <div class="chart-item-2">
                <van-row>
                    <van-col span="13" style="height: 140px !important;padding-left: 20px" >
                        <dv-full-screen-container style="height: 140px !important;">
                            <dv-percent-pond :config="config" style="width:150px;height:140px;" />
                            <div class="font">当日用电量：{{config.value}}(亿万千)</div>   <!--单位-->
                        </dv-full-screen-container>
                    </van-col>
                    <van-col span="11" style="height: 140px !important;">
                        <dv-full-screen-container style="height: 140px !important;">
                            <dv-water-level-pond :config="config1" style="width:150px;height:140px" />
                            <div class="font">当日用电量：{{config1.value}}(亿万千)</div>  <!--单位-->
                        </dv-full-screen-container>
                    </van-col>
                </van-row>
            </div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>水电趋势</span>
        </div>
        <div class="chart-div">
            <div id="trend" class="chart-item-1"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>燃气趋势</span>
        </div>
        <div class="chart-div">
            <div id="gas" class="chart-item-1"></div>
            <div class="divider"></div>
        </div>
        <div class="title-item">
            <span>供暖供热</span>
        </div>
        <div class="chart-div">
            <van-row>
                <van-col span="12"><div id="heating1" class="chart-item-3"></div></van-col>
                <van-col span="12"><div id="heating2" class="chart-item-3"></div></van-col>
            </van-row>
            <van-row>
                <van-col span="12"><div id="heating3" class="chart-item-3"></div></van-col>
                <van-col span="12"><div id="heating4" class="chart-item-3"></div></van-col>
            </van-row>
            <div class="divider"></div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts'
import { Dialog } from 'vant'
import { onegnqkList, gqqkList, ybpList } from '@/api/hydropower-warming/index'
export default {
  name: 'index',
  data () {
    return {
      list: [],
      config: {
        colors: ['#ffbe35', '#ffe634'],
        textColor: '#a6a6a6',
        value: 68
      },
      config1: {
        colors: ['#3DE7C9', '#00BAFF'],
        data: [20],
        shape: 'round'
      }
    }
  },
  methods: {
    // 水电趋势
    trend (xData, waterSupply, inputEle) {
      let myChart = echarts.init(document.getElementById('trend'))
      // 指定图表的配置项和数据

      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: {
          top: '15%'
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: ['用水量', '用电量']
        },
        xAxis: [
          {
            type: 'category',
            data: xData,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '万立方米',
            min: 0,
            max: 200,
            interval: 50,
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '亿千瓦时',
            min: 0,
            max: 2,
            interval: 0.5,
            axisLabel: {
              formatter: '{value}'
            }
          }
        ],
        series: [
          {
            name: '用水量',
            type: 'line',
            data: waterSupply
          },
          {
            name: '用电量',
            type: 'line',
            data: inputEle
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    // 燃气趋势
    gas (xData, useGaas, tankGaas, inputGaas) {
      let myChart = echarts.init(document.getElementById('gas'))
      // 指定图表的配置项和数据

      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          bottom: 10,
          left: 'center',
          data: ['使用量', '罐存量', '输入量']
        },
        grid: {
          right: '5%',
          top: '15%'
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: xData
          }
        ],
        yAxis: [
          {
            name: '万立方米',
            min: 0,
            max: 500,
            interval: 100,
            type: 'value'
          }
        ],
        series: [
          {
            name: '使用量',
            type: 'line',
            areaStyle: {},
            data: useGaas,
            color: '#ffdb5c'
          },
          {
            name: '罐存量',
            type: 'line',
            areaStyle: {},
            data: tankGaas,
            color: '#67e0e3'
          },
          {
            name: '输入量',
            type: 'line',
            areaStyle: {},
            data: inputGaas,
            color: '#9fe6b8'
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    // 住宅 (residence_num)/非住宅(non_residence_num)
    heating1 (res) {
      let myChart = echarts.init(document.getElementById('heating1'))
      // 指定图表的配置项和数据
      let option = {
        title: {
          subtext: '单位：亿万千米',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '  {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          // top: 'middle',
          bottom: 10,
          left: 'center',
          data: ['非住宅供热面积', '住宅供热面积']
        },
        color: [ '#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        series: [
          {
            type: 'pie',
            radius: '60',
            center: ['50%', '45%'],
            selectedMode: 'single',
            data: [
              { value: res.residence_num, name: '住宅供热面积' },
              { value: res.non_residence_num, name: '非住宅供热面积' }
            ],
            label: {
              position: 'inner'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    // 集中 (focus_num)/非集中(non_focus_num)
    heating2 (res) {
      let myChart = echarts.init(document.getElementById('heating2'))
      // 指定图表的配置项和数据
      let option = {
        title: {
          subtext: '单位：亿万千米',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '  {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          // top: 'middle',
          bottom: 10,
          left: 'center',
          data: ['非集中供热', '集中供热']
        },
        color: [ '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        series: [
          {
            type: 'pie',
            radius: '60',
            center: ['50%', '45%'],
            selectedMode: 'single',
            data: [
              { value: res.non_focus_num, name: '集中供热' },
              { value: res.focus_num, name: '非集中供热' }
            ],
            label: {
              position: 'inner'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    // 市九区（urban_num）/市外郊（suburb_num）
    heating3 (res) {
      let myChart = echarts.init(document.getElementById('heating3'))
      // 指定图表的配置项和数据
      let option = {
        title: {
          subtext: '单位：亿万千米',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '  {c} ({d}%)'
        },
        legend: {
          // orient: 'vertical',
          // top: 'middle',
          bottom: 10,
          left: 'center',
          data: ['市外郊供热面积', '市九区供热面积']
        },
        color: [ '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293' ],
        series: [
          {
            type: 'pie',
            radius: '60',
            center: ['50%', '45%'],
            selectedMode: 'single',
            data: [
              { value: res.urban_num, name: '市九区供热面积' },
              { value: res.suburb_num, name: '市外郊供热面积' }
            ],
            label: {
              position: 'inner'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    // 煤炭（coal_num）/清洁能源 （clean_num）
    heating4 (res) {
      let myChart = echarts.init(document.getElementById('heating4'))
      // 指定图表的配置项和数据
      let option = {
        title: {
          subtext: '单位：亿万千米',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '  {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          // top: 'middle',
          bottom: 10,
          left: 'center',
          data: ['燃煤', '清洁能源']
        },
        color: [ '#ffdb5c', '#9fe6b8', '#ff9f7f', '#fb7293' ],
        series: [
          {
            type: 'pie',
            radius: '60',
            center: ['50%', '45%'],
            selectedMode: 'single',
            data: [
              { value: res.clean_num, name: '清洁能源' },
              { value: res.coal_num, name: '燃煤' }
            ],
            label: {
              position: 'inner'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    },
    getData () {
      // 供暖情况
      onegnqkList().then(({ data }) => {
        let { errcode, data: res, errmsg } = data
        if (errcode === 0) {
          this.heating1({ non_residence_num: res[0].non_residence_num, residence_num: res[0].residence_num })
          this.heating2({ non_focus_num: res[0].non_focus_num, focus_num: res[0].focus_num })
          this.heating3({ urban_num: res[0].urban_num, suburb_num: res[0].suburb_num })
          this.heating4({ clean_num: res[0].clean_num, coal_num: res[0].coal_num })
        } else {
          Dialog.alert({
            message: errmsg
          })
        }
      })
      // 今日水电 暂放
      ybpList().then(({ data }) => {
        let { errcode, data: res, errmsg } = data
        if (errcode === 0) {
          console.log(res)
          // this.config1.formatter = res[0].water_top
          // this.config.formatter = res[0].eletop
          this.config.value = res[0].eletop
          this.config1.value = res[0].water_top
          console.log(this.config.value)
          console.log(this.config.formatter)
        } else {
          Dialog.alert({
            message: errmsg
          })
        }
      })
      //   水电趋势 燃气趋势
      gqqkList().then(({ data }) => {
        let { errcode, data: res, errmsg } = data
        if (errcode === 0) {
          let xData = []; let useGaas = []; let tankGaas = []; let inputGaas = []; let waterSupply = []; let inputEle = []
          res.forEach(item => {
            xData.push(item.md)
            useGaas.push(item.use_gaas_amount)
            tankGaas.push(item.tank_gaas_amount)
            inputGaas.push(item.input_gaas_amount)
            waterSupply.push(item.water_supply_amount)
            inputEle.push(item.input_ele_amount)
          })
          this.trend(xData, waterSupply, inputEle)
          this.gas(xData, useGaas, tankGaas, inputGaas)
        } else {
          Dialog.alert({
            message: errmsg
          })
        }
      })
    }
  },
  mounted () {
    this.getData()
  }
}
</script>

<style scoped>
    .content{
        background-color: #efefef;
    }
    .chart-item-2{
        width: 100%;
        height: 160px;
    }
    .chart-item-3{
        width: 100%;
        height: 180px;
    }
    .chart-item-1{
        width: 100%;
        height: 240px;
    }
    .chart-item{
        width: 100%;
        height: 270px;
    }
    .font{
        font-size: 10px;
        margin-top: 5px;
    }
    .box1{
        height: 90px;
        width: 90px;
        border: #31f7ff 3px solid;
        border-radius: 50%;
        margin-left: 45px;
        text-align: center;
    }
    .top{
        margin-top: 30px;
        font-size: 12px;
    }
    .foot{
        margin-top: 5px;
        font-size: 10px;
    }
    .box2{
        height: 90px;
        width: 90px;
        border: #ffc729 4px solid;
        border-radius: 50%;
        margin-left: 25px;
        text-align: center;
    }
    .chart-item{
        width: 100%;
        height: 300px;
    }
    .title-item{
        padding: 10px;
        font-size: 14px;
        color: #333333;
    }
    .left{
        margin-left: 30px;
    }
    .title-item span{
        border-left: 5px solid #8b0000;
        padding-left: 5px;
    }
    .table-item{
        font-size: 10px;
        text-align: center;
        padding: 0 5px;
        border: 1px solid #dddddd;
        border-top: 0;
    }
    .table-item:first-child{
        border-top: 1px solid #dddddd;
    }
    .table-item:nth-child(2n+1){
        background: #ffffff;
    }
    .table-div{
        padding: 10px;
    }
    .van-col {
        padding: 10px 0;
    }
    .content >>> .van-progress__pivot{
        background-color: initial !important;
        color: #ffffff;
    }
    /*.content >>> .van-progress{*/
    /*    background-color: #dddddd;*/
    /*}*/
    .van-tag{
        margin-right: 1px;
    }
    #dv-full-screen-container{
        position: initial;
    }
    .chart-div{
        padding: 0 10px;
    }
    .chart-div .chart-item-2,.chart-div .chart-item-3,.chart-div .chart-item-1,.chart-div .chart-item,.chart-div .table-item{
        background-color: #ffffff;
    }
    .divider{
        width: 100%;
        height: 5px;
        background-color: rgb(204, 204, 204);
        margin-top: 10px;
    }
    .chart-div .van-col--12{
        padding: 0;
    }
</style>
